<!DOCTYPE html>
<html>
<head>
    <meta charset="UTF-8">
    <title>首页</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1.0,maximum-scale=1.0,user-scalable=no">
    <link type="text/css" rel="stylesheet" href="css/common.css">
    <link type="text/css" rel="stylesheet" href="css/banner.css">
    <link type="text/css" rel="stylesheet" href="css/iconfont.css">
    <link type="text/css" rel="stylesheet" href="css/category.css">
    <link type="text/css" rel="stylesheet" href="css/nav-selection.css">
    <link type="text/css" rel="stylesheet" href="css/rank.css">
</head>
<body>
   <div class="root">
       <div class="root">
           <!--banner组件开始-->
           <div class="banner">
               <div id="banner-img-view" class="banner-img-view">
                   <ul class="banner-img-box">
                       <li>
                           <img class="banner-img" src="./img/timg.jpg">
                           <span class="banner-title">该死的低端安卓</span>
                       </li>
                       <li>
                           <img class="banner-img"  src="./img/tt.jpg">
                           <span class="banner-title">我要发财</span>
                       </li>
                       <li>
                           <img class="banner-img" src="./img/tt2.jpg">
                           <span class="banner-title">我是标题3</span>
                       </li>
                   </ul>
               </div>
               <div class="banner-title-shadow">
                   <div class="banner-position">
                       <i class="icon iconfont icon-dian1 bp-active"></i>
                       <i class="icon iconfont icon-dian1"></i>
                       <i class="icon iconfont icon-dian1"></i>
                   </div>
               </div>
           </div>
           <!--banner组件结束-->

           <!--种类卡片开始-->
           <div class="category-card">
               <div class="category-title">
                   <img class="category-img" src="./img/hot.png">
                   <div class="category-text">
                       <span class="category-name">热门试卷</span>
                       <span class="category-advertise">大家都在做的试卷</span>
                   </div>
               </div>
               <div class="category-page-box-view">
                   <ul class="category-page-box">
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-3.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                   </ul>
               </div>
           </div>
           <!--种类卡片结束-->

           <!--种类卡片开始-->
           <div class="category-card">
               <div class="category-title">
                   <img class="category-img" src="./img/hot.png">
                   <div class="category-text">
                       <span class="category-name">热门试卷</span>
                       <span class="category-advertise">大家都在做的试卷</span>
                   </div>
               </div>
               <div class="category-page-box-view">
                   <ul class="category-page-box">
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-2.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-3.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-3.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-3.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-3.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-2.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                   </ul>
               </div>
           </div>
           <!--种类卡片结束-->

           <!--种类卡片开始-->
           <div class="category-card">
               <div class="category-title">
                   <img class="category-img" src="./img/hot.png">
                   <div class="category-text">
                       <span class="category-name">热门试卷</span>
                       <span class="category-advertise">大家都在做的试卷</span>
                   </div>
               </div>
               <div class="category-page-box-view">
                   <ul class="category-page-box">
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-3.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-3.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-3.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-2.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-3.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-3.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                   </ul>
               </div>
           </div>
           <!--种类卡片结束-->

           <!--种类卡片开始-->
           <div class="category-card">
               <div class="category-title">
                   <img class="category-img" src="./img/hot.png">
                   <div class="category-text">
                       <span class="category-name">热门试卷</span>
                       <span class="category-advertise">大家都在做的试卷</span>
                   </div>
               </div>
               <div class="category-page-box-view">
                   <ul class="category-page-box">
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-6-1.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-6-1.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-3.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-6-1.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-2.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                       <li class="page-box">
                           <div class="page-cover">
                               <img src="img/2017-12-3.jpg">
                               <div class="page-shadow">
                                   <span class="question-count">55题</span>
                               </div>
                               <div class="page-name">
                                   17年12月四级真题1
                               </div>
                               <div class="page-production">
                                   17年12月真题第一套
                               </div>
                           </div>
                       </li>
                   </ul>
               </div>
           </div>
           <!--种类卡片结束-->

           <!--排行榜组件开始-->
           <div class="rank">
               <div class="rank-title">
                   <i class="icon iconfont icon-paihangbang phb"></i>人气榜
               </div>
               <div class="rank-member-box ">
                   <div class="rank-member rank-one">
                       <div class="rank-cover">
                           <img src="img/2017-6-1.jpg">
                       </div>
                       <span class="rank-page rank-span">2017年6月四级真题(第一套)</span>
                       <span class="rank-label rank-span">四级 真题</span>
                       <span class="rank-hot rank-span"><i class="iconfont icon icon-favorfill"></i>人气值: 2000</span>
                       <span class="rank-score">01</span>
                   </div>
               </div>
               <div class="rank-member-box ">
                   <div class="rank-member rank-two">
                       <div class="rank-cover">
                           <img src="img/2017-6-1.jpg">
                       </div>
                       <span class="rank-page rank-span">2017年6月四级真题(第一套)</span>
                       <span class="rank-label rank-span">四级 真题</span>
                       <span class="rank-hot rank-span"><i class="iconfont icon icon-favorfill"></i>人气值: 2000</span>
                       <span class="rank-score">01</span>
                   </div>
               </div>
               <div class="rank-member-box">
                   <div class="rank-member rank-three">
                       <div class="rank-cover">
                           <img src="img/2017-6-1.jpg">
                       </div>
                       <span class="rank-page rank-span">2017年6月四级真题(第一套)</span>
                       <span class="rank-label rank-span">四级 真题</span>
                       <span class="rank-hot rank-span"><i class="iconfont icon icon-favorfill"></i>人气值: 2000</span>
                       <span class="rank-score">01</span>
                   </div>
               </div>
               <div class="rank-member-box">
                   <div class="rank-member">
                       <div class="rank-cover">
                           <img src="img/2017-6-1.jpg">
                       </div>
                       <span class="rank-page rank-span">2017年6月四级真题(第一套)</span>
                       <span class="rank-label rank-span">四级 真题</span>
                       <span class="rank-hot rank-span"><i class="iconfont icon icon-favorfill"></i>人气值: 2000</span>
                       <span class="rank-score">02</span>
                   </div>
               </div>
               <div class="rank-member-box">
                   <div class="rank-member">
                       <div class="rank-cover">
                           <img src="img/2017-6-1.jpg">
                       </div>
                       <span class="rank-page rank-span">2017年6月四级真题(第一套)</span>
                       <span class="rank-label rank-span">四级 真题</span>
                       <span class="rank-hot rank-span"><i class="iconfont icon icon-favorfill"></i>人气值: 2000</span>
                       <span class="rank-score">0</span>
                   </div>
               </div>
               <div class="rank-member-box">
                   <div class="rank-member">
                       <div class="rank-cover">
                           <img src="img/2017-6-1.jpg">
                       </div>
                       <span class="rank-page rank-span">2017年6月四级真题(第一套)</span>
                       <span class="rank-label rank-span">四级 真题</span>
                       <span class="rank-hot rank-span"><i class="iconfont icon icon-favorfill"></i>人气值: 2000</span>
                       <span class="rank-score">03</span>
                   </div>
               </div>
               <div class="rank-member-box">
                   <div class="rank-member">
                       <div class="rank-cover">
                           <img src="img/2017-6-1.jpg">
                       </div>
                       <span class="rank-page rank-span">2017年6月四级真题(第一套)</span>
                       <span class="rank-label rank-span">四级 真题</span>
                       <span class="rank-hot rank-span"><i class="iconfont icon icon-favorfill"></i>人气值: 2000</span>
                       <span class="rank-score">04</span>
                   </div>
               </div>
               <div class="rank-member-box">
                   <div class="rank-member">
                       <div class="rank-cover">
                           <img src="img/2017-6-1.jpg">
                       </div>
                       <span class="rank-page rank-span">2017年6月四级真题(第一套)</span>
                       <span class="rank-label rank-span">四级 真题</span>
                       <span class="rank-hot rank-span"><i class="iconfont icon icon-favorfill"></i>人气值: 2000</span>
                       <span class="rank-score">08</span>
                   </div>
               </div>
               <div class="rank-member-box">
                   <div class="rank-member">
                       <div class="rank-cover">
                           <img src="img/2017-6-1.jpg">
                       </div>
                       <span class="rank-page rank-span">2017年6月四级真题(第一套)</span>
                       <span class="rank-label rank-span">四级 真题</span>
                       <span class="rank-hot rank-span"><i class="iconfont icon icon-favorfill"></i>人气值: 2000</span>
                       <span class="rank-score">06</span>
                   </div>
               </div>
               <div class="rank-member-box">
                   <div class="rank-member">
                       <div class="rank-cover">
                           <img src="img/2017-6-1.jpg">
                       </div>
                       <span class="rank-page rank-span">2017年6月四级真题(第一套)</span>
                       <span class="rank-label rank-span">四级 真题</span>
                       <span class="rank-hot rank-span"><i class="iconfont icon icon-favorfill"></i>人气值: 2000</span>
                       <span class="rank-score">07</span>
                   </div>
               </div>
               <div class="rank-member-box">
                   <div class="rank-member">
                       <div class="rank-cover">
                           <img src="img/2017-6-1.jpg">
                       </div>
                       <span class="rank-page rank-span">2017年6月四级真题(第一套)</span>
                       <span class="rank-label rank-span">四级 真题</span>
                       <span class="rank-hot rank-span"><i class="iconfont icon icon-favorfill"></i>人气值: 2000</span>
                       <span class="rank-score">08</span>
                   </div>
               </div>
           </div>
           <!--排行榜组件结束-->

           <div class="stub">
           </div>

           <!--固定底部选项卡切换组件开始-->
           <div class="nav-selection">
               <ul class="selections-box">
                   <li class="selections-action">
                       <div>
                           <i class="icon iconfont icon-home "></i>
                           <span>首页</span>
                       </div>
                   </li>
                   <li>
                       <div>
                           <i class="icon iconfont icon-apps "></i>
                           <span>分类</span>
                       </div>
                   </li>
                   <li>
                       <div>
                           <i class="icon iconfont icon-explore "></i>
                           <span>发现</span>
                       </div>
                   </li>
                   <li>
                       <div>
                           <i class="icon iconfont icon-my "></i>
                           <span>我的</span>
                       </div>
                   </li>
               </ul>
           </div>
           <!--固定底部选项卡切换组件结束-->
       </div>
   </div>
</body>
<script src="js/banner.js"></script>
<script src="js/category.js"></script>
<script>
    window.onresize = function(){
        autoChangeBannerWidth();
        autoPageBoxWidth();
    }
</script>
</html>